import React, { useMemo } from 'react';
import Template from 'art-template'

const defStyle = { width: '100%', 'min-height': '40px' }
const data = {
  list: []
}
const template = '<div></div>'

const App = (props) => {
  const { formItemProps, templateProps, initialValue } = props;

  const html = useMemo(() => {
    const renderResult = Template.compile(templateProps?.scriptText || template)
    return renderResult(initialValue ? (Array.isArray(initialValue) ? { list: initialValue } : initialValue) : data)
  }, [initialValue, templateProps])

  return (
    <div
      style={{ ...defStyle }}
    >
      {formItemProps?.label}
      <div dangerouslySetInnerHTML={{ __html: html }}></div>
    </div>
  );
};

export default App;
